<%@page language="java" import="java.util.*" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@include file="/WEB-INF/pages/common/taglib.jsp"%>
<!DOCTYPE HTML>
<html>
  <head>
	<!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码-->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<!--当前页面的三要素-->
	<title>陇上无限学——陇南情Malron</title>
	<meta name="Keywords" content="关键词,关键词">
	<meta name="description" content="">
	<link rel="icon" href="${basePath}/resources/images/tmtitle.png">
	<link rel="icon" href="${basePath}/resources/images/tmtitle.png" type="image/x-icon" />
	<style type="text/css">
		#sort{background:#2B9C6B;}
	</style>
	<link rel="stylesheet" href="${basePath}/resources/css/layout.css"/>
	<%@include file="/WEB-INF/pages/common/common.jsp"%>
	<script type="text/javascript" src="${basePath}/resources/js/search.js"></script>
	<script src="${basePath}/resources/js/echart/echarts.js"></script>
	<script src="${basePath}/resources/js/echart/echarts-all.js"></script>
 </head>
 <body>
	<div class="wrap">
		<%@include file="/WEB-INF/pages/common/menu.jsp"%>
		<div class="content">
			<%@include file="/WEB-INF/pages/common/header.jsp"%>
			<div class="cnt tztab">
					<!-- <div class="htitle"> 首页  &gt; 日记管理</div> -->
					<select onchange="loadData(this.value)">
						<option>请选择年份</option>
						<c:forEach begin="2010" end="2020" var="year">
							<option value="${year}">${year}</option>	
						</c:forEach>
					</select>
					<div class="tabwrap" id="main" style="height:400px"></div>	
			</div>
			<div class="tabwrap">
				<!--表格-->
				<table class="tztab">
					<thead>
						<tr>
							<th>课程编号</th>
							<!-- <th>标题 <span class="up"></span> <span class="down"></span></th>	 -->
							<th>课程名称</th>	
							<th>发布时间
							<select id="sort">
								<option value="asc">升序</option>
								<option value="desc" selected="selected">降序</option>
							</select>
							</th>	
							<th>操作</th>
						</tr>
					</thead>
					<!--身体部-->
					<tbody id="tbody">
						<tr>
							<td id="loading" colspan="50"></td>
						</tr>
					</tbody>
				</table>
				<div class="cpage"></div>
			</div>
		</div>
	</div>
	 <script>
	 
	$(function(){
		loadData(new Date().getFullYear());
	});
	
	// 点击日期的回调函数
	function changeDate(dp){
		var date = dp.cal.getNewDateStr();
		loadData(date);
	}
 
	 function loadData(year){
		 $.ajax({
	 		type:"post",
	 		url:adminPath+"/echart/courselist",
	 		data:{year:year},
	 		success:function(data){
	 			var json = {
					title :year+ '年陇上无限学课程发布详情',
					datas:parseData(data)
				};
	 			initChart("main",json);
	 		}
		 });
	 }
	 
	 //json数据的处理	 
	 function parseData(jsonArr){
			var jsonObj = {};
			for(var key in jsonArr){
				var num = jsonArr[key].num;
				var m = jsonArr[key].m;
				jsonObj["s"+parseInt(m)]= num;
			};
			var arr = [];
			for(var i=1;i<=12;i++){
				arr.push(jsonObj["s"+i]||0);
			}
			return arr;
		}
	 
	//数据月份补零
	function parseData(jsonArr){
		var jsonObj = {};
		for(var key in jsonArr){
			var num = jsonArr[key].num;
			var m = jsonArr[key].m;
			jsonObj["s"+parseInt(m)]= num;
		};
		var arr = [];
		for(var i=1;i<=12;i++){
			arr.push(jsonObj["s"+i]||0);
		}
		return arr;
	};
	
	
	//统计报表的初始化
	function initChart(targetId,json){
		require.config({
	           paths: {
	               echarts: basePath+'/resources/js/echart'
	           }
	       });
	       require(
	           [
	               'echarts',
	               'echarts/chart/bar',
				   'echarts/chart/pie'
	           ],
	          function (ec) {
	               var myChart = ec.init(document.getElementById(targetId));
	               var option  = {
					    title : {
					    	x: "center",
					        text: json.title,
					        subtext: "月份/发布课程数"
					    },
					    tooltip : {
					        trigger: 'axis'
					    },
					   
					    toolbox: {
					        show : true,
					        feature : {
					            mark : {show: true},
					            dataView : {show: true, readOnly: false},
					            magicType : {show: true, type: ['line', 'bar']},
					            restore : {show: true},
					            saveAsImage : {show: true}
					        }
					    },
					    
					    calculable : true,
					    xAxis : [
					        {
					            type : 'category',
					            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
					        }
					    ],
					    yAxis : [
					        {
					            type : 'value'
					        }
					    ],
					    series : [
					        {
					            name:'发布课程数',
					            type:'bar',
					            data:json.datas,
					            markPoint : {
					                data : [
					                    {type : 'max', name: '最大值'},
					                    {type : 'min', name: '最小值'}
					                ]
					            },
					            markLine : {
					                data : [
					                    {type : 'average', name: '平均值'}
					                ]
					            }
					        }
					    ]
					};
	               //添加报表数据给echart
				myChart.setOption(option);
	               //初始化echart的config对象
				var ecConfig = require('echarts/config');
	               //执行config的回调函数
				myChart.on(ecConfig.EVENT.CLICK, eConsole);
	           }
	       );
	};
	
	var mark = true;
	function eConsole(d) {
		//获取用户点击的数据
		var month = parseInt(d.name);
		var sort = document.getElementById("sort").value||"desc";
		//参数
		var params ={
			month:month,
			order:"create_time "+sort,
			pageNo:0,
			pageSize:12
		};
		if(mark){
			mark = !mark;
			//执行业务
				$.ajax({
	 			type:"post",
	 			url:adminPath+"/echart/monthlist",
	 			data:params,
	 			error:function(){mark=true;},
	 			success:function(data){
	 				//alert(JSON.stringify(data));
	 				var len = data.length;
	 				var html = "";
	 				for(var i=0;i<len;i++){
	 					html+="<tr>"+
	 					"	<td>"+data[i].cno+"</td>"+
	 					"	<td>"+data[i].cname+"</td>"+
	 					"	<td>"+data[i].create_time+"</td>"+
	 					"	<td><a href='javascript:void(0);' data-opid='${course.id}' onclick='tzAdmin.remove(this)'><i class='fa fa-trash del' style='font-size:16px;color:#939da8'></i></a></td>"+
	 					"</tr>";
	 				}
	 				$("#tbody").html(html);
	 				mark = true;
	 			}
	 		});
		}
	};
   </script>
 </body>
</html>


		